<template>
  <el-container>
    <basic-crud ref="crudRef" v-loading="loading" :defaultListParams="{orderBy:'orderNum',orderMethod:'asc'}"
                :option="option" businessUrl="/mes/mesApplyProductController">
      <template #menu="{row}">
        <el-button
            icon="el-icon-top"
            type="text"
            @click="moveUpHandler(row)"
        >上移
        </el-button>
        <el-button
            icon="el-icon-bottom"
            type="text"
            @click="moveDownHandler(row)"
        >下移
        </el-button>
      </template>
    </basic-crud>

  </el-container>
</template>

<script setup>
import {moveDown, moveUp} from "../../../apis/mes/mesApplyProductApi";

const option = ref({
  highlightCurrentRow: true,
  size: 'small',
  menuWidth: 300,
  column: [
    {
      label: "名称",
      prop: "name",
      search: true,
      sortable: true,
      rules: [{required: true, message: "名称不能为空"}],
    }, {
      label: "描述",
      prop: "des",
      search: true,
      sortable: true,
    }, {
      label: "排序",
      prop: "orderNum",
      type: "number",
      step: 10,
      sortable: true,
      rules: [
        {required: true, message: "排序号不能为空"},
        {type: 'number', message: "排序号必须为数字值", trigger: "blur"},
      ],
    }
  ]
});

const crudRef = ref(null);

// 通用确认对话框
const confirmOperation = (actionName) => {
  return ElMessageBox.confirm(
      `确定要${actionName}此项吗？`,
      {title: '操作确认', type: 'warning'}
  ).then(() => {
    loading.value = true;
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消操作',
    })
  })
};

// 操作后刷新数据
const refreshData = () => {
  crudRef.value?.getList();
};

const loading = ref(false);
// 下移处理（
const moveDownHandler = (row) => {
  confirmOperation('下移').then(() => {
    moveDown(row).then(() => {
      ElMessage.success('下移成功');
      refreshData();
    }).catch(err => {
      ElMessage.error(err);
    }).finally(() => {
      loading.value = false;
    });
  })
};

// 上移处理
const moveUpHandler = (row) => {
  confirmOperation('上移').then(() => {
    moveUp(row).then(() => {
      ElMessage.success('上移成功');
      refreshData();
    }).catch(err => {
      ElMessage.error(err);
    }).finally(() => {
      loading.value = false;
    });
  })
};
</script>

<style lang="scss" scoped>
</style>
